// JavaScript Document
/*
* REQUIRED
jquery && jquery ui
blockster - a slideshow pluggin. 
*
*/
	var myTimer = null; //delay before flipping image
	var revertTimer = null; //delay before reverting to original state. 
	var isMouseOver = false; //only flip image when mouse over, else, revert
	var imgStates = [0,0,0,0,0]; //state of each image : 0-origin, 1-flipped
	var focusedPic = -1; // image id on which mouse is over
	var blocksterInst = new Array(); //blockster instances 
	var mutex = false; //determine if animation is running. 
	//var onSub = false; //workaround for the mouseover bug 
	
	
	$(function(){
			  //initialize highlighter positions
			  var pos = $('#initial').position();
			  $('#highlighter').css({'top':(pos.top-4),'left':pos.left});
			  //initialize blockster instances
			  for(var t=0; t<5; t++){
			  	blocksterInst[t] = new Blockster({
					holder: ('#flip'+(t+1)),
					pause: 60*60000,
					rows: 4,
					cols: 6,
					random: true
					
					});
			  	}
			   });
			  
	//mouseover bug - workaround
	/*
	function subMOver(){
		onSub = true;
	}
	function subMOut(){
		onSub = false;
	}
	*/
	
	function handleMouseOver(id){
		if(focusedPic != -1 && focusedPic!=id) 
			hideImgSub(focusedPic);
		focusedPic = id;
		//console.log(focusedPic);
		if(revertTimer!=null){
			clearTimeout(revertTimer);
			revertTimer = null;
		}
		if(!isMouseOver){
			isMouseOver = true;
			if(!mutex){
				//if no animation is running, delay only 1s
				myTimer = setTimeout("flipScreen()",1000);		
			}
			else{
				//if reverting animation is running, delay for 6s
				myTimer = setTimeout("flipScreen()",6000);
			}
		}
		else{
			//if(subStates[id-1] == 0)
			showImgSub(id);
		}
		
		
	}
	
	/*
	Display the subtitle in a blue box over the image. 
	*/
	function showImgSub(id){
	
		if(imgStates[id-1] == 1 && id == focusedPic && isMouseOver){
				var subt = $('#sub'+id);
				var topP = $('#flip'+id).attr('height')-subt.css('height');
				subt.css({'left':0,'top':topP});
				if(subt.css('display')=='none')
					subt.show( 'clip', {}, 600, callback );
				
		}
	}
	/*
	Hide the image sub title 
	*/
	function hideImgSub(id){
		//console.log(focusedPic + " " + id);
		var subt = $('#sub'+id);
		if(subt.css('display')=='block'){
			subt.hide('clip',{},600,callback);	
		}
	}
	
	function callback(){
		//display image here
	}
	
	function handleMouseOut(id){
		isMouseOver = false;
		if(myTimer!=null){
			clearTimeout(myTimer);
			myTimer = null;			
		}

		if(!mutex)
			revertTimer = setTimeout("revertScreen()",3000);
		else
			revertTimer = setTimeout("revertScreen()",6000);
		//revertScreen();
	}
	
	/*
	flip a given image. 
	*/
	function execFlip(id){
		blocksterInst[id].jump(1);
		imgStates[id] = 1;
	}
	
	/*
	trigger a series of animation for all 5 images. 
	*/
	function flipScreen(){
		//console.log('star flipping');
		mutex = true;
		var i;
		for(i=1; i<=5; i++){
			if(imgStates[i-1] == 0){
				//startFlipSequence(i);
				//break;
				setTimeout("execFlip("+(i-1)+")",(i-1)*400);
				//blocksterInst[i-1].jump(1);
			}
		}
		mutex = false;
		//console.log('end flipping');
		if(i==6){
			showImgSub(focusedPic);
		}
		
	}
	
	/*
	revert a given image with id
	*/
	function execRevert(id){
		hideImgSub(id);//workaround for case mouse 's out of the whole bunches of images
		blocksterInst[id].jump(0);	
		imgStates[id] = 0;
	}
	/*
	trigger a series of animation for all 5 images
	*/
	function revertScreen(){
		//console.log('start reverting ');
		mutex = true;
		for(var i=5; i>=1; i--){
			if(imgStates[i-1] == 1){
				//startRevertSequence(i);
				//break;
				setTimeout("execRevert("+(i-1)+")",(5-i)*400);
			}
		}
		mutex = false;
		//console.log('end reverting');
	}
	
	/*
	function startFlipSequence(order){
		if(order<=5 && isMouseOver){
			$('#flip'+order).flip({
				direction: 'lr',
				color: '#000',
				bgColor: '#fff',
				speed: 150,
				onAnimation: function(){
					var target = $('#flip'+order);
					target.attr('src',getFlippedImage(target.attr('src')));
				},
				onEnd: function(){
					//console.log('when the animation has already ended');
					imgStates[order-1] = 1;			
					//show subtitle
					showImgSub(order);
					//flip the rest 
					startFlipSequence(++order);
				}
			});
		}
	}
	
	
	
	function startRevertSequence(order){
		if(order >=1 && !isMouseOver){
		
			$('#flip'+order).flip({
				direction: 'rl',
				color: '#000',
				bgColor: '#fff',
				speed: 150,
				onAnimation: function(){
					var target = $('#flip'+order);
					target.attr('src',getOriginImage(target.attr('src')));
				},
				onEnd: function(){
					//update state of image
					imgStates[order-1] = 0;
					//console.log('when the animation has already ended');
					startRevertSequence(--order);
				}
			});
		}
	}
	
	function getFlippedImage(src){

		return src.replace(".jpg","_flipped.jpg");
	}
	
	function getOriginImage(src){
		return src.replace("_flipped","");
	}
	
	*/
	
	/*
	* move blue highlight bar to the clicked item
	*/
	
	function highlight(obj){
		//get position of the clicked item
		var pos = $(obj).position();
		//move animation to the clicked item
		$('#highlighter').animate({
								  	'top':(pos.top-4),'left':pos.left
								  },100,function(){
									  $('#selectedMenu').html($(obj).html());
									  $('#selectedSolution').html($(obj).html());
								  });
	}